<template>
  <div>
    <a-modal
      :afterClose="clearForm"
      title="添加货品"
      :visible="visible "
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="prods_form"
        :rules="add_prod_rule"
        :model="form_prods"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="国内单号">
          <a-input v-model="form_prods.expressno" placeholder="请输入国内单号" prop="expressno" />
        </a-form-model-item>

        <a-form-model-item label="货品名称：">
          <a-input v-model="form_prods.name" placeholder="请输入货品名称" prop="name" />
        </a-form-model-item>

        <a-form-model-item label="货品重量：">
          <a-input v-model="form_prods.weight" placeholder="请输入货品重量" prop="weight" />
        </a-form-model-item>

        <a-form-model-item label="长*宽*高：">
          <a-row :gutter="10">
            <a-col span="7">
              <a-input v-model="form_prods.c" placeholder="请输入长" />
            </a-col>
            <a-col :span="1">*</a-col>
            <a-col span="7">
              <a-input v-model="form_prods.k" placeholder="请输入宽" />
            </a-col>
            <a-col :span="1">*</a-col>
            <a-col span="7">
              <a-input v-model="form_prods.g" placeholder="请输入高" />
            </a-col>
          </a-row>
        </a-form-model-item>

        <a-form-model-item label="体积重">
          <h3>{{tjz||0 }}</h3>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-row :gutter="30">
      <a-col :span="14">
        <a-form-model
          ref="order_form"
          :rules="add_order_rule"
          :model="form_order"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <div style="display:flex;align-items:center;">
            <a-button type="primary" @click="save" icon="save">保存信息</a-button>

            <div style="margin-left:100px;">
              <a-date-picker
                format="YYYY-MM-DD HH:mm:ss"
                v-model="currentTime"
                :show-time="{ defaultValue: moment(new Date().getFormatTime(), 'HH:mm:ss') }"
              />
            </div>
          </div>
          <a-divider style="margin:5px" orientation="left">基本信息</a-divider>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="寄件人：" prop="sender">
                <a-input v-model="form_order.sender" placeholder="请输入寄件人" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                label="寄件人电话："
                prop="s_tel "
                :label-col="{span:8}"
                :wrapper-col="{span:13}"
              >
                <a-input v-model="form_order.s_tel" placeholder="请输入寄件人电话" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="收件人：" prop="receiver">
                <a-input v-model="form_order.receiver" placeholder="请输入收件人">
                  <a-icon
                    type="file-search"
                    style="cursor:pointer;"
                    @click="drawer_visible=true"
                    slot="suffix"
                  ></a-icon>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                label="收件人电话："
                prop="r_tel"
                :label-col="{span:8}"
                :wrapper-col="{span:13}"
              >
                <a-input v-model="form_order.r_tel" placeholder="请输入收件人电话" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="22">
              <a-form-model-item
                label="收件地址："
                prop="address"
                :label-col="{span:4}"
                :wrapper-col="{span:20}"
              >
                <a-input type="textarea" v-model="form_order.address" placeholder="请输入收件地址" />
              </a-form-model-item>
              <a-divider style="margin:5px" orientation="left">价格信息</a-divider>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="8">
              <a-form-item label="是否合单：" :label-col="{span:8}" :wrapper-col="{span:10}">
                <a-switch v-model="form_order.isHeDan" default-checked />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="其他费用："
                :label-col="{span:8}"
                :wrapper-col="{span:10}"
                prop="other"
              >
                <a-input v-model="form_order.other" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="订单价格："
                :label-col="{span:8}"
                :wrapper-col="{span:10}"
                prop="price"
              >
                <a-input v-model="form_order.price" />
              </a-form-item>
            </a-col>
            <a-col :span="22">
              <a-form-model-item label="备注：" :label-col="{span:2}" :wrapper-col="{span:22}">
                <a-input type="textarea" v-model="form_order.remark" placeholder="请输入备注" />
                <a-popover v-model="smile_visible" title="表情列表" trigger="click">
                  <div slot="content">该功能已下架</div>
                  <a-button>
                    <a-icon type="smile" />
                  </a-button>
                </a-popover>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row></a-row>
        </a-form-model>
      </a-col>
      <a-col :span="10">
        <a-button type="primary" @click="visible=true" icon="plus-square">添加货品</a-button>
        <a-divider style="margin:5px" orientation="left">货品列表</a-divider>
        <a-table rowKey="id" :columns="columns" :data-source="prods">
          <span slot="tjz" slot-scope="t,r">
            <a-popover trigger="hover">
              <span style="text-decoration:underline">{{t}}</span>
              <template slot="content">长宽高：{{r.c}}cm&nbsp;*{{r.k}}cm&nbsp;*{{r.g}}cm&nbsp;</template>
              <div style="font-size:14px; text-decoration: underline;">{{r.receiver}}</div>
            </a-popover>
          </span>
          <span slot="action" slot-scope="text,record,i">
            <a-icon type="delete" @click="prods.splice(i,1)" />
          </span>
        </a-table>
        <a-col></a-col>
        <a-row :span="24">
          <a-col :span="8">
            <a-statistic title="总重量" :value="zzl" style="margin-right: 50px" />
          </a-col>
          <a-col :span="8">
            <a-statistic title="总体积重" :value="ztjz" style="margin-right: 50px" />
          </a-col>
          <a-col :span="8">
            <a-statistic title="计费重量" :value="jfzl" style="margin-right: 50px" />
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-drawer
      title="客户列表"
      placement="left"
      :closable="false"
      :visible="drawer_visible"
      @close="drawer_visible=false"
    >
      <a-list
        class="demo-loadmore-list"
        :loading="loading"
        item-layout="horizontal"
        :data-source="cus_data"
      >
        <div
          v-if="showLoadingMore"
          slot="loadMore"
          :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
        >
          <a-spin v-if="loadingMore" />
          <a-button v-else @click="getCustomerList">loading more</a-button>
        </div>
        <a-list-item slot="renderItem" slot-scope="item, ">
          <a slot="actions">
            <a-icon type="arrow-right" @click="setReceiver(item)" />
          </a>
          <a-list-item-meta :description="item.tel">
            <a slot="title" href="https://www.antdv.com/">{{ item.realname}}</a>
            <a-avatar
              slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-drawer>
  </div>
</template>

<script>
const columns = [
  {
    id: "1",
    title: "国内单号",
    dataIndex: "expressno",
    key: "expressno",
    ellipsis: true,
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    ellipsis: true,
  },
  {
    title: "重量(kg)",
    dataIndex: "weight",
    key: "weight",
    width: 80,
  },
  {
    title: "体积重(kg)",
    dataIndex: "tjz",
    key: "tjz",
    scopedSlots: { customRender: "tjz" },
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

columns.forEach((r) => (r.align = "center"));

import infiniteScroll from "vue-infinite-scroll";
import add_prod_rule from "@/rules/add_prod_rule";
import add_order_rule from "@/rules/add_order_rule";
import moment from "moment";

export default {
  directives: { infiniteScroll },
  data() {
    return {
      cus_page_current: 1,
      loading: false,
      loadingMore: false,
      showLoadingMore: true,
      cus_data: [],
      smile_visible: false,
      currentTime: moment(new Date()),
      add_order_rule,
      add_prod_rule,
      drawer_visible: false,
      visible: false,
      prods: [],
      isHeDan: true,
      columns,
      form_order: {
        remark: "",
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form_prods: {
        expressno: "",
        name: "",
        c: "",
        k: "",
        g: "",
        weight: "",
      },
    };
  },
  computed: {
    tjz() {
      return Math.ceil(
        (this.form_prods.c * this.form_prods.g * this.form_prods.k) / 6000
      );
    },
    ztjz() {
      return this.prods.reduce((result, item) => (result += item.tjz), 0);
    },
    zzl() {
      return this.prods.reduce((result, item) => (result += item.weight), 0);
    },
    jfzl() {
      return Math.max(this.ztjz, this.zzl);
    },
  },
  watch: {
    drawer_visible(val) {
      if (val) {
        this.getCustomerList();
      } else {
        this.cus_data = [];
        this.cus_page_current = 1;
      }
    },
  },
  methods: {
    setReceiver(item) {
      this.form_order.receiver = item.realname;
      this.form_order.r_tel = item.tel;
      this.form_order.address = item.address;
      this.drawer_visible = false;
    },
    async getCustomerList() {
      this.loadingMore = true;
      let { data } = await this.$get("/cus/list", {
        pageIndex: this.cus_page_current++,
        pageSize: 10,
        // keywords: this.keywords,
      });

      if (!data || !data.list || data.list.length) {
        this.$mw("没有数据了");
        this.loadingMore = false;
        return;
      }

      this.cus_data = this.cus_data.concat(data.list);
      this.loadingMore = false;
      this.$nextTick(() => {
        window.dispatchEvent(new Event("resize"));
      });
    },
    setRemark(e) {
      this.form_order.remark = e.target.innerHTML;
    },
    moment,
    clearForm() {
      this.$refs.prods_form.resetFields();
    },
    handleOk() {
      this.$refs.prods_form.validate((valid) => {
        if (valid) {
          this.form_prods.tjz = this.tjz;
          this.prods.push(JSON.parse(JSON.stringify(this.form_prods)));
          this.visible = false;
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
    save() {
      this.$refs.order_form.validate(async (valid) => {
        if (valid) {
          if (!this.prods || !this.prods.length)
            return this.$mw("请添加货品！");
          this.form_order.type = this.form_order.isHeDan ? 1 : 0;
          this.form_order.state = 1;
          this.form_order.createtime = this.currentTime;
          this.form_order.wxid = "admin";
          this.form_order.prods = this.prods;

          let { success } = await this.$post("/order/add", this.form_order);
          if (success) {
            this.$ms("添加成功");
            this.prods = [];
            this.$refs.order_form.resetFields();
          }
        }
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.demo-infinite-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 300px;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>